import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
import { Animated, Text, StyleSheet, Image, Pressable, View } from 'react-native';
import { useTranslation } from 'react-i18next';
import { px2dp, scale, width } from '~/utils/px2dp';

type BannerNotificationProps = {};
type NoticeType = 'success' | 'error';

// 定义通过 ref 暴露的方法类型
export type BannerNotificationRef = {
    show: (message: string, type: NoticeType) => void;
};
const BannerNotification = forwardRef<BannerNotificationRef, BannerNotificationProps>((props, ref) => {
    const [isVisible, setIsVisible] = useState(false);
    const [message, setMessage] = useState('');
    const [actionType, setActionType] = useState<NoticeType>('success');
    const slideAnim = useRef(new Animated.Value(300)).current;
    useImperativeHandle(ref, () => ({
        show: (msg: string, type: NoticeType) => {
            setMessage(msg);
            setIsVisible(true);
            setActionType(type);
            Animated.timing(slideAnim, {
                toValue: 0,
                duration: 500,
                useNativeDriver: true,
            }).start();
            setTimeout(() => {
                hide();
            }, 3000);
        },
    }));
    // 隐藏横幅通知
    const hide = () => {
        Animated.timing(slideAnim, {
            toValue: -300,
            duration: 500,
            useNativeDriver: true,
        }).start(() => {
            setIsVisible(false);
        });
    };

    if (!isVisible) return null;

    return (
        <Animated.View
            style={[
                styles.banner,

                {
                    transform: [{ translateX: slideAnim }], // 控制水平位移
                },
            ]}>
            <Pressable style={styles.row}>
                <Image
                    resizeMode="contain"
                    style={styles.logo}
                    source={{
                        uri: 'https://bjy-crmeb.oss-cn-shenzhen.aliyuncs.com/attach/2025/10/44574202510091417565820.png',
                    }}
                />
                <View>
                    <Text style={styles.appName}>Wristech Connect</Text>
                    <Text style={[styles.message, actionType == 'error' && { color: 'red' }]} numberOfLines={2}>
                        {message}
                    </Text>
                </View>
            </Pressable>
        </Animated.View>
    );
});

// 样式
const styles = StyleSheet.create({
    row: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    banner: {
        position: 'absolute',
        top: 50,
        left: px2dp(24),
        right: px2dp(24),
        backgroundColor: '#fff',
        padding: px2dp(24),
        borderRadius: px2dp(22),
    },
    logo: {
        width: px2dp(100),
        height: px2dp(100),
        borderRadius: px2dp(60),
        marginRight: px2dp(8),
    },
    appName: {
        fontSize: scale(28),
        color: '#111111',
        fontWeight: 'bold',
    },
    message: {
        width: width - px2dp(186),
        fontSize: scale(24),
        color: '#666666',
        marginTop: px2dp(8),
        lineHeight: px2dp(34),
    },
});

export default BannerNotification;
